<template>
  <div class="main-container">
    <div class="top">
      <div class="item-bg left w-full h-full">
        <span class="title px-[15px] !py-0">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="TEST" tab="试评进度" />
            <a-tab-pane key="FORMAL" tab="正评进度" />
          </a-tabs>
          <span style="flex: 1"></span>
        </span>
        <table class="topClose" width="100%">
          <thead>
            <tr>
              <th colspan="3">
                科目名称:
                <span v-if="userInfo.manageKmdm != '0'">
                  ({{ kmpyInfo.kmdm || '--' }}){{ kmpyInfo.kmmc || '--' }}
                </span>
                <a-select
                  v-else
                  :filter-option="filterOption"
                  v-model:value="pageAccountCodeKmdm"
                  :options="kmOptions"
                  :field-names="{ label: 'kmmc', value: 'kmdm' }"
                  show-search
                  style="width: 200px"
                  placeholder="请选择科目"
                />
              </th>
              <th colspan="3">所属学院:({{ kmpyInfo.xydm || '--' }}){{ kmpyInfo.xymc || '--' }}</th>
              <th colspan="2">科目总分:{{ kmpyInfo.kmzf || '--' }}分</th>
              <th colspan="2" v-if="activeKey === 'FORMAL'">
                应考人数:{{ kmpyInfo.bkksCount || '--' }}人
              </th>
              <th v-if="activeKey === 'TEST'">试评试卷份数</th>
              <th class="px-2">
                <a-button
                  type="primary"
                  :disabled="
                    (kmpyInfo.kmpyjd !== 'TEST' && kmpyInfo.kmpyjd !== 'FORMAL') ||
                    activeKey !== kmpyInfo.kmpyjd
                  "
                  @click="handleBeforeSubmit"
                >
                  {{ activeKey == 'TEST' ? '上报试评完成' : '上报正评完成' }}
                </a-button>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>最高分</td>
              <td>平均分</td>
              <td> 标准分差 </td>
              <td> 区分度 </td>
              <td>中位数</td>
              <td>及格率</td>
              <td colspan="2">零分人数</td>
              <td v-if="activeKey === 'FORMAL'">实考人数</td>
              <td v-if="activeKey === 'FORMAL'">缺考人数</td>
              <td rowspan="2" v-if="activeKey === 'TEST'">{{ curSubject.sjsprs ?? '--' }}</td>
              <td rowspan="2">
                <a-tag
                  :color="
                    applyOverInfo?.applyState == 'AUDIT'
                      ? '#F97316'
                      : applyOverInfo?.applyState == 'REJECT'
                      ? '#DC2626'
                      : applyOverInfo?.applyState == 'PASS'
                      ? '#10C0B6'
                      : ''
                  "
                  :title="applyOverInfo?.applyRemark"
                >
                  {{ applyOverInfo?.applyStatTest }}
                </a-tag>
              </td>
            </tr>
            <tr>
              <td>{{ curSubject.zgf ?? '--' }}</td>

              <td>{{ curSubject.pjf ?? '--' }}</td>
              <td>{{ curSubject.bzc ?? '--' }}</td>
              <td>{{ curSubject.qfd ?? '--' }}</td>
              <td>{{ curSubject.zws ?? '--' }}</td>
              <td>{{
                typeof curSubject.jgl === 'number' ? `${(curSubject.jgl * 100).toFixed(2)}%` : '--'
              }}</td>
              <td colspan="2">{{ curSubject.lfrs ?? '--' }}</td>
              <td v-if="activeKey === 'FORMAL'">{{ curSubject.skCount ?? '--' }}</td>
              <td v-if="activeKey === 'FORMAL'">{{ curSubject.qkCount ?? '--' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="bottom">
      <info-list :activeKey="activeKey" :kmdm="pageAccountCodeKmdm" />
    </div>

    <applyOver v-model:applyVisible="applyVisible" @success="handleSubmit" />
  </div>
</template>
<script lang="ts" setup name="ReviewTask">
import { onMounted, ref, watch, computed, h, onActivated } from 'vue'
import infoList from './info-list.vue'
import applyOver from './applyOver.vue'
import { useUserStore } from '/@/store/modules/user'
import { getKmSimpAlleList } from '/@/api/organization/subjectManage'
import { getcommonKmSummarySimple, getPyOverApplyKmdm, setkmPyOverApply } from '/@/api/teacher'
import { getAcountmdm } from '/@/api/examinationAudit'
import aCheckbox from 'ant-design-vue/es/checkbox'
// 消息提示框
import { useMessage } from '/@/hooks/web/useMessage'

import { getDictionaryList } from '/@/views/teacher/home/index'
const { createMessage, createConfirm } = useMessage()

const userStore = useUserStore()
const userInfo = <any>computed(() => userStore.getUserInfo)
const kmpyInfo = ref<any>({})
const activeKey = ref('FORMAL')
const pageAccountCodeKmdm = ref<string | undefined>()
const curSubject: any = ref({})

watch([activeKey, pageAccountCodeKmdm], async ([_, newVal], [e, oldval]) => {
  curSubject.value = {}
  applyOverInfo.value = {}
  if (!pageAccountCodeKmdm.value) {
    return (
      (!userInfo.value.manageKmdm || userInfo.value.manageKmdm === '0') &&
      createMessage.warn('请选择科目')
    )
  }
  if (newVal !== oldval) {
    await getKmpyJd(newVal)
  }
  getInfoFun()
})

// 科目评阅详情
const getInfoFun = async () => {
  let { code, data, message } = await getcommonKmSummarySimple({
    kmdm: pageAccountCodeKmdm.value,
    zpDataFlag: activeKey.value === 'FORMAL' ? 'true' : 'false',
  })
  if (code == 200) {
    curSubject.value = data
    getKmApplyOver(pageAccountCodeKmdm.value)
  } else createMessage.error(message)
}

/**
 * 获取科目评阅进度信息（是否评完）
 */
const applyOverInfo = ref<any>({})
async function getKmApplyOver(kmdm) {
  if (!kmdm || kmdm === '0') return
  const { code, data } = await getPyOverApplyKmdm({
    kmdm,
    zpDataFlag: activeKey.value === 'FORMAL' ? 'true' : 'false',
  })
  if (code == 200) {
    applyOverInfo.value = data || {}
    applyOverInfo.value.applyStatTest =
      auditList.value?.find(item => item.value === data?.applyState)?.label || '--'
  }
}

const applyVisible = ref(false)

function handleBeforeSubmit() {
  let conFirmMess: any = createConfirm({
    iconType: 'warning',
    title: () => h('span', '温馨提醒'),
    content: () =>
      h('div', null, [
        h(
          'div',
          {
            style: {
              color: '#333',
            },
          },
          '您确定要上报评阅完成吗？上报后将无法再进行评阅操作，请谨慎操作！'
        ),
        h(
          aCheckbox,
          {
            onChange: e => {
              conFirmMess?.update({
                okButtonProps: {
                  disabled: !e.target.checked,
                  title: e.target.checked ? '我已阅读并了解' : '勾选确认后才可操作',
                },
              })
            },
            style: {
              position: 'absolute',
              bottom: '30px',
              left: '24px',
            },
          },
          '我已阅读并了解'
        ),
      ]),
    okButtonProps: {
      disabled: true,
      title: '勾选确认后才可操作',
    },
    onOk: () => {
      applyVisible.value = true
    },
  })
}

/**
 * 上报评阅完成
 */
async function handleSubmit(applyRemark) {
  if (!pageAccountCodeKmdm.value) return createMessage.warn('请选择科目')
  const { code, message } = await setkmPyOverApply({
    kmdm: pageAccountCodeKmdm.value,
    zpDataFlag: activeKey.value === 'FORMAL' ? 'true' : 'false',
    applyRemark,
  })
  if (code == 200) {
    createMessage.success(message)
    getInfoFun()
  } else createMessage.error(message)
}

/**
 * 获取科目信息

 */
async function getKmpyJd(kmdm) {
  if (!kmdm || kmdm === '0') return
  const { code, data } = await getAcountmdm({ kmdm })
  if (code == 200) {
    activeKey.value = data.kmpyjd != 'FORMAL' ? 'TEST' : data.kmpyjd
    kmpyInfo.value = data
  }
}

// 科目筛选相关功能
const kmOptions = ref<any>([])
function filterOption(input: string, option: any = {}) {
  return option['kmmc']?.indexOf(input) >= 0
}

// 页面初始化
async function pageInit() {
  if (!userInfo.value.manageKmdm || userInfo.value.manageKmdm === '0') {
    let { code, data } = await getKmSimpAlleList({
      pageSize: 0,
    })
    if (code == 200) {
      data.forEach(item => (item.kmmc = `${item.kmdm}(${item.kmmc})`))
      kmOptions.value = data.sort((a, b) => a.kmdm - b.kmdm)
    }
  } else {
    await getKmpyJd(userInfo.value.manageKmdm)
    pageAccountCodeKmdm.value = userInfo.value.manageKmdm
  }
}
const auditList = ref<any>([])
onMounted(async () => {
  auditList.value = (await getDictionaryList('audit')) || []
})
onActivated(async () => {
  pageInit()
})
</script>
<style lang="less" scoped>
.main-container {
  .item-bg {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0px 0px 6px 1px rgba(128, 144, 219, 0.16);
    border-radius: 6px 6px 6px 6px;
    position: relative;

    .title {
      width: 100%;
      padding: 10px 16px;
      font-weight: bold;
      color: #3f4355;
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      border-bottom: 2px solid #f0f1f8;
      display: flex;
      align-items: center;

      ::v-deep(.ant-tabs-top > .ant-tabs-nav) {
        margin: 0;
      }
    }

    .infoboxliest {
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: center;
      .box {
        div {
          padding: 20px 0;
        }

        .anticon {
          font-size: 25px !important;
        }

        .numben {
          font-size: 20px;
          color: #666;
        }
      }
    }
  }
}

.top {
  width: 100%;
  height: 205px;
  margin-bottom: 20px;
  display: flex;

  .left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .topClose {
      margin: 0;
      text-align: center;
      thead tr th {
        text-align: center;
        border: 1px solid #e8e8e8;
        line-height: 50px;
        background-color: #eff6ff;
        white-space: nowrap;
      }

      tbody tr td {
        text-align: center;
        border: 1px solid #e8e8e8;
        line-height: 50px;
        width: 11.11%;
      }
      ::v-deep(.ant-select-selector) {
        background-color: #eff6ff;
        text-align: left;
      }
    }
  }
}

.bottom {
  width: 100%;
}
</style>
